<template>
  <div class="main">
    <el-container id="main-container">
      <el-aside id="aside" :width="isFold ? '60px' : '210px'">
        <main-menu :iscollapse="isFold" />
      </el-aside>

      <el-container>
        <el-header id="header">
          <main-header @fold-change="handelMenuIconClick" />
        </el-header>

        <el-main id="main-body">
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import mainHeader from '@/components/mainHeader/mainHeader.vue'
import mainMenu from '@/components/mainMenu.vue/mainMenu.vue'
import { useLoginStore } from '@/store/login/login'

const loginStore = useLoginStore()
loginStore.loadLocalCacheAction()
const isFold = ref()
function handelMenuIconClick(iscollapse: boolean) {
  isFold.value = iscollapse
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  #main-container {
    width: 100%;
    height: 100%;

    #header {
      width: 100%;
      height: 50px;
    }
  }
}

#aside {
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 200px;
  text-align: left;
  cursor: pointer;
  background-color: #001529;
  scrollbar-width: none; // firefox
  -ms-overflow-style: none; // IE
  transition: width 0.3s ease;

  &::-webkit-scrollbar {
    //去除滚动条
    width: 0 !important;
    display: none !important;
  }
}

#main-body {
  background-color: #f3f4f8;
}
</style>
